<template>
	<view class="content page" id="order_detail" style="padding-bottom: 0;">
		<status-bar title='物流详情'></status-bar>
		<backTop v-if='toTop'></backTop>
		<view class="receipt_addr mb_03">
			<!-- 快递 start -->
			<view class="logistics_addr">
				<image :src="staticUrl+'/images/line.jpg'" mode="widthFix"></image>
				<view class="r_addr_info">
					<p class="r_addr_info_t">{{detail.uname}}&nbsp;&nbsp;&nbsp;&nbsp;{{detail.utel}}</p>
					<view class="r_addr_info_c">
						{{detail.address}}
					</view>
				</view>
				<image :src="staticUrl+'/images/line.jpg'" mode="widthFix"></image>
			</view>
			<!-- 快递 end -->
			<!-- 自提 start -->
			<view class="store_addr">
				<view class="r_addr_info">
					<view class="r_addr_info_t" @click="telPhone(detail.shopMobile)">{{detail.shopName?detail.shopName:shopName}}&nbsp;&nbsp;&nbsp;&nbsp;{{detail.shopMobile?detail.shopMobile:service_tel}}</view>
				</view>
			</view>
			<!-- 自提 end -->
			<view class="infobar2">
				<p class="infobar2_t">备注信息</p>
				<view class="infobar2_c" v-if='detail.remarks'>{{detail.remarks}}</view>
				<view class="infobar2_c" v-else>无</view>
			</view>
		</view>
		<view class="logistics flex-box align-center" v-if='detail.courier_name'>
			<text class="iconfont icon-wuliu"></text>
			<view class="flex">
				<p>{{detail.courier_name}}</p>
				<p class="logistics_num">{{detail.courier_num}}</p>
			</view>
		</view>
		<view class="logistics_item">
			<view class="logistics_list" v-for="(wl,index) in expressMsg" :key='index'>
				<view class="left_title">
					<view class="orderType">{{wl.context}}</view>
					<!-- <view class="orderDescribe">请耐心等待上家确认</view> -->
				</view>
				<view class="right_time">
					<view class="">{{wl.date}}</view>
					<view class="">{{wl.time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default{
		data(){
			return{
				toTop:false,
				navFixed:false,
				expressMsg:[],// 物流信息
				detail:{},// 订单详情
				shopName: uni.getStorageSync('startUp').shopName,
				service_tel: uni.getStorageSync('startUp').service_tel,
				staticUrl: this.staticUrl,
			}
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid,
				imageUrl: shareData.imageUrl
			}
		},
		onShow(){
			// #ifdef H5
			this.H5Share()
			// #endif
		},
		onLoad(options) {
			that = this
			var order_id = options.order_id; // 订单id
			let vid = uni.getStorageSync("vid");
			var adId = options.adId;
			 /** *订单详情* **/
			 that.$http.post({
			 	url: '/zzj_singleSaleApi/orderDetails',
			 	data: {
			 		order_id: order_id,
			 		v_id: vid,
			 	}
			 }).then(res => {
			 	if(res.data){
			 		that.detail = res.data;
			 	}
			 })
			/** *查看物流* **/
			 that.$http.post({
			 	url: '/zzj_singleSaleApi/expressinfo',
			 	data: {
			 		order_id: order_id
			 	}
			 }).then(res => {
			 	if(res.data){
			 		that.expressMsg = res.data;
			 		that.expressMsg.forEach((item,index)=>{
			 			item.date = item.ftime.substring(5,7)+'月'+item.ftime.substring(8,10)+"日";
			 			item.time = item.ftime.substring(14,19)
			 		})
			 	}
			 })
		},
		onPageScroll(e){
			if(e.scrollTop > 200){
				that.toTop = true;
			} else {
				that.toTop = false
			}
			if(e.scrollTop > 583){
				that.navFixed = true
			} else {
				that.navFixed = false
			}
		},
		methods:{
			telPhone:function(phoneNumber){
				uni.makePhoneCall({
					phoneNumber:phoneNumber
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.logistics{
		border-radius: 10px;
		margin-bottom: 30upx;
		padding: 30upx;
		background-position-x: 30upx;
		&::after{
			right: 30upx;
		}
	}
	.logistics_list{
		line-height: 40upx;
		color: #999999;
		overflow: hidden;
		position: relative;
		padding-left: 60upx;
		padding-bottom: 30upx;
	}
	.logistics_list:last-child:after{
		display: none;
	}
	.orderType{
		color: #333333;
		font-size: 28upx;
	}
	.orderDescribe{
		font-size: 24upx;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.left_title{
		float: left;
		width: 80%;
	}
	.right_time{
		float: right;
		width: 20%;
		text-align: right;
	}
	.logistics_addr image{
		width: 100%;
	}
	
	.logistics_addr image{
		width: 100%;
		
	}
	.logistics:after{
		display: none;
	}
	.logistics_item{
		border-radius: 10px;
		margin-bottom: 15px;
		padding: 30upx 44upx 30upx 30upx;
		background: #FFFFFF;
	}
	.logistics_list:before,
	.logistics_list:after{
		content: '';
		position: absolute;
		border: 1px solid #ff4b4e;
		box-sizing: border-box;
	}
	.logistics_list:after{
		width: 2upx;
		height: 90%;
		background: #ff4b4e;
		content: '';
		position: absolute;
		border: 1px solid #ff4b4e;
		box-sizing: border-box;
		left: 14upx;
		bottom: 0;
	}
	.logistics_list:before{
		width: 30upx;
		height:30upx;
		background: #FFFFFF;
		border-radius: 100%;
		left: 0;
		top: 10upx;
		z-index: 5;
	}
	
</style>
